<template>
  <el-sub-menu v-if="item.children && item.children.length" :index="item.path">
    <template #title>
      <i :class="item.meta?.icon"></i>
      <span>{{ item.meta?.title }}</span>
    </template>
    <SidebarItem
      v-for="child in item.children"
      :key="child.path"
      :item="child"
    />
  </el-sub-menu>

  <el-menu-item v-else :index="item.path">
    <i :class="item.meta?.icon"></i>
    <span>{{ item.meta?.title }}</span>
  </el-menu-item>
</template>

<script setup>
defineProps({
  item: {
    type: Object,
    required: true
  }
})
</script>

<style scoped>

</style>